{% extends "base/base.html" %}

{% block content %}
                  <div class="col-md-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>任务搜索框</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <br />
                    <div class="form-horizontal form-label-left col-md-3">

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">任务类型</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                          <select class="form-control" id="task-type">
                            <option>任务类型</option>
                              {% for type in types %}
                            <option value="{{ type }}">{{ type }}</option>
                              {% endfor %}
                          </select>
                        </div>
                      </div>
                    </div>
                       <div class="form-horizontal form-label-left col-md-3">

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">任务分类</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                          <select class="form-control" id="category">
                            <option>任务分类</option>
                              {% for category in categories %}
                            <option value="{{ category.name }}">{{ category.display }}</option>
                              {% endfor %}
                          </select>
                        </div>
                      </div>
                    </div>
                       <div class="form-horizontal form-label-left col-md-3">

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">任务名称</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                          <input type="text" class="form-control" placeholder="任务名称" id="name">
                        </div>
                      </div>
                    </div>
                      <div class="form-horizontal form-label-left col-md-3">

                      <div class="form-group">
                        <div class="col-md-9 col-sm-9 col-xs-12">
                          <button type="submit" class="btn btn-success" id="searchButton">搜索任务</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>任务列表</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <p class="text-muted font-13 m-b-30">
                    </p>
                    <table id="task" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                      <thead>
                        <tr>
                            <th>任务编号</th>
                          <th>任务名称</th>
                          <th>任务类型</th>
                          <th>任务分类</th>
                        </tr>
                      </thead>
                      <tbody>
                      </tbody>
                    </table>

                  </div>
                </div>
              </div>

{% endblock %}

{% block script %}
    <script>
    var table = '';
    function taskTable() {
        //提示信息
        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };



        //初始化表格
        table = $("#task").dataTable({
            language:lang,  //提示信息
            autoWidth: false,  //禁用自动调整列宽
            stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
            processing: true,  //隐藏加载提示,自行处理
            serverSide: true,  //启用服务器端分页
            searching: false,  //禁用原生搜索
            orderMulti: false,  //启用多列排序
            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
            renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
            pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
            columnDefs: [{
                "targets": 'nosort',  //列的样式名
                "orderable": false    //包含上样式名‘nosort’的禁止排序
            }],
            ajax: function (data, callback, settings) {
                //封装请求参数
                var param = {};
                param.page = (data.start / data.length)+1;//当前页码
                param.type = $("#task-type").val()
                param.category = $("#category").val()
                param.name = $("#name").val()
                // console.log(param);
                //ajax请求数据
                $.ajax({
                    type: "GET",
                    url: "/job/task/list",
                    cache: false,  //禁用缓存
                    data: param,  //传入组装的参数
                    dataType: "json",
                    success: function (result) {
                        //console.log(result);
                        //setTimeout仅为测试延迟效果
                        setTimeout(function () {
                            //封装返回数据
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.total;//返回数据全部记录
                            returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.result;//返回的数据列表
                            //console.log(returnData);
                            //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        }, 200);
                    }
                });
            },
            //列表表头字段
            columns: [
                { "data": "name" },
                { "data": "type" },
                { "data": "category" },
                { "data": "id" }
            ],
            "aoColumns": [
                { "sTitle":"任务名称", "mDataProp": "name","sClass":"center"},
                { "sTitle":"任务类型", "mDataProp": "type","sClass":"center"},
                {"sTitle":"任务分类", "mDataProp": "category","sClass":"center"},
                {
                    "sTitle": "操作", "mDataProp": "id", "sClass": "center",
                    "mRender": function (data, type, full) {
                        return '<a class="btn btn-success btn-sm" href=/job/task/info/' + full.id + '>' + '查看任务' + '</a>';
                    }
                }]
        }).api();
        //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
    }
    $(document).ready(taskTable())
    $("#searchButton").click(function () {
        table.ajax.reload()
    })
    </script>
{% endblock %}